<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
<meta charset="UTF-8">
<link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
<script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
	<script>
		//页面加载完毕后
		$(function () {

			if(window.top!=window){
				window.top.location=window.location;
			}

			//页面加载完毕后，将用户文本框中的内容清空
			// .html是标签对中的内容<h1>这里的内容</h1>
			// .val是文本框中的内容
			$("#loginAct").val("");


			//在页面加载完毕后，让用户的文本框自动获的焦点
			//$("#loginAct").onblur()失去焦点
			$("#loginAct").focus();

			//为登录按钮绑定事件执行操作（点击事件）
			$("#submitBtn").click(function () {
				login();
			})

			//为当前窗口绑定敲键盘事件
			//event:这个参数可以取得我们敲的是那个键
			// window:表示当前窗口
			$(window).keydown(function (event) {
				// alert(event.keyCode);

				//如果取得的键位的码值是13，表示敲的是回车键
				if (event.keyCode==13){
					login();

				}
			})
			
		})


		//养成好习惯把普通的自定义的方法写在$(sunction(){})的外边
		function login() {
			// alert("登录操作");

			//验证账号密码不能为空
			//取得账号密码
			//将文本中的左右空格去掉，使用$.trim(文本);
			var loginAct=$.trim($("#loginAct").val());
			var loginPwd=$.trim($("#loginPwd").val());

			if (loginAct=="" || loginPwd==""){
				$("#msg").html("账号密码不能为空");

				//如果账号密码为空，则需要及时强制终止该方法
				return false;
			}

			//去后台验证登录相关操作
			$.ajax({
				url : "settings/user/login.do",
				data : {

					"loginAct" : loginAct,
					"loginPwd" : loginPwd


				},
				//这虽然是个查询操作但是参数涉及到了密码，所以要使用post请求。
                type : "post",
				//唯一能确定的是dataType："json"
				dataType : "json",
				success : function (data) {
					/*

					  data
					      {"success":true/false,"msg":"哪错了"}

					 */

					//如果登陆成功
					if (data.success){

						//跳转到工作台的初始页（欢迎页）
						window.location.href = "workbench/index.jsp";

					//如果登陆失败
					} else {
						$("#msg").html(data.msg);

					}
				}
			})

		}
	</script>
</head>
<body>
	<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
		<img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
	</div>
	<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
		<div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">CRM &nbsp;<span style="font-size: 12px;">&copy;2017&nbsp;动力节点</span></div>
	</div>
	
	<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
		<div style="position: absolute; top: 0px; right: 60px;">
			<div class="page-header">
				<h1>登录</h1>
			</div>
			<form action="workbench/index.jsp" class="form-horizontal" role="form">
				<div class="form-group form-group-lg">
					<div style="width: 350px;">
						<input class="form-control" type="text" placeholder="用户名" id="loginAct">
					</div>
					<div style="width: 350px; position: relative;top: 20px;">
						<input class="form-control" type="password" placeholder="密码" id="loginPwd">
					</div>
					<div class="checkbox"  style="position: relative;top: 30px; left: 10px;">
						
							<span id="msg" style="color: red"></span>
						
					</div>
					<%--在<form></form>表单中即使type="submit"不写，那<button>也会默认type="submit",我们一定要将按钮设置为button
					    按钮所触发的行为应该是由我们自己手动写js代码来决定(type="button"他就不会执行页面额跳转了，我个傻子上次没设置，我说怎么回事)

					--%>
					<button type="button" id="submitBtn" class="btn btn-primary btn-lg btn-block"  style="width: 350px; position: relative;top: 45px;">登录123</button>
				</div>
			</form>
		</div>
	</div>
</body>
</html>